<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="big-screen-outer">
  <div class="big-screen">
    <div class="big-screen-box">
      <div
        *ngFor="let index of [0, 1, 2, 3, 4, 5, 6, 7]"
        [attr.class]="'big-screen-node node-' + index"
      >
        <span class="big-screen-node-title"></span>
        <div *ngIf="statusArr[index] === 'error'" class="error-tips">
          <div lv-overflow class="error-tips-title" [ngStyle]="{maxWidth:i18n.isEn?'225px':'135px'}">
            {{ environmentInfoList[index].name }}
          </div>
          <div class="error-tips-info">
            <span class="error-tips-info-title" lv-overflow lvTooltipTheme="dark">
              {{ 'common_file_sys_total_label' | i18n }}
            </span>
            <span class="error-tips-info-number" lv-overflow lvTooltipTheme="dark">
              {{ environmentInfoList[index].fileSystemTotalNum }}
            </span>
          </div>
          <div class="error-tips-info">
            <span class="error-tips-info-title" lv-overflow lvTooltipTheme="dark">
              {{ 'common_exceptions_file_total_label' | i18n }}
            </span>
            <span class="error-tips-info-number" lv-overflow lvTooltipTheme="dark">
              {{ environmentInfoList[index].exceptionFileSystemNum }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="counts-line">
    <span class="pair"
      >{{ 'common_total_label' | i18n }}: {{ totalCount }}</span
    >
    <span class="pair"
      ><div class="status-flag status-normal-flag"></div>
      <span class="pair-title">{{ 'common_status_normal_label' | i18n }}:</span>
      {{ normalCount }}</span
    >
    <span class="pair">
      <div class="status-flag status-exception-flag"></div>
      <span class="pair-title"
        >{{ 'common_status_exception_label' | i18n }}:</span
      >
      {{ exceptionCount }}</span
    >
    <span class="pair">
      <div class="status-flag status-offline-flag"></div>
      <span class="pair-title"> {{ 'common_off_label' | i18n }}:</span>
      {{ offlineCount }}</span
    >
  </div>
</div>
